<template>
  <!--验证中心-->
<div>
  <div class="index-proving bg-fff border-bottom border-top mb-20">
    <div class="prov-titl text-center py-20 border-bottom">
      <h2 class="f34 color-333 fontbold">验证中心</h2>
      <p class="f28 color-666 ">输入客服QQ号，可以为您验证是否为5173官方客服</p>
    </div>
    <div class="prov-conn px-30 py-15">
      <input class="prov-input color-333 f32"
        type="tel"
        placeholder="请输入客服QQ号"
        :value="serviceQqFilter"
        @input="inputChange"
        minlength="5"
        maxlength="11">
      <a class="prov-btn color-fff f32 bg-f54 fr text-center" @click="verify">立即验证</a>
    </div>
  </div>

  <div class="dialog-box bg-fff" v-show="isTrue===false">
    <div class="dialog-main">
      <div class="dialog-body">
        <h2 class=" color-000">经验证，QQ客服<em class="color-m1">{{serviceQqFilter}}</em>为假客服</h2>
        <p class="f28 color-666">若您有疑问，请点击下方在线咨询进行解答</p>
      </div>
      <div class="dialog-foot">
        <a class="dialog_close border-right">在线咨询</a>
        <a class="dialog_close color-000">取消</a>
      </div>
    </div>
  </div>
  <div class="dialog-box bg-fff" v-show="isTrue">
    <div class="dialog-main">
      <div class="dialog-body">经验证，QQ客服<em class="color-m1">{{serviceQqFilter}}</em>为真客服</div>
      <div class="dialog-foot">
        <a class="dialog_close">知道了</a>
      </div>
    </div>
  </div>
</div>
</template>
<script>
//import inputComponent from 'components/common/formComponent/inputComponent'
export default {
  data() {
    return {
      serviceQq: '',
      isTrue: ''
    }
  },
  components: {
    //inputComponent
  },
  computed: {
    serviceQqFilter() {
      return this.serviceQq.replace(/\D/g, '')
    }
  },
  mounted() {
    const s1 = document.createElement('script');
    s1.type = 'text/javascript';
    s1.text = 'NTKF_PARAM = {' +
            'siteid: "bq_1000",' +
            'settingid: "bq_1000_1472795888825",' +
            'uid: "",' +
            'uname: "",' +
            'isvip: "0",' +
            'userlevel: "1",' +
            'erpparam: "abc"' +
            '}';
    document.body.appendChild(s1);
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = encodeURI('https://dl.ntalker.com/js/b2b/ntkfstat.js?siteid=bq_1000');
    s.charset = "utf-8";
    document.body.appendChild(s);
  },
  methods: {
    inputChange(e) {
      this.serviceQq = e.target.value
    },
    verify() {
      if (this.serviceQqFilter.length<5 || this.serviceQqFilter.length>11) {
        this.$toast('QQ号码格式有误')
      } else {
        this.$http.get(this.$CONSTANTS.APIQuestion + 'serviceqq/checkserviceqq', {params: {serviceQq: this.serviceQqFilter}}).then(res => {
          if (!res.body.isTrue) {
            this.$messagebox({
              title:'',
              message:`
              <div>
                <p class='pop01 f32'>经验证，QQ客服<span class='color-m1'>${this.serviceQqFilter}</span>为假客服</p>
                <em class='pop02 f28 color-666'>若您有疑问，请点击下方在线咨询进行解答</em>
              </div>
              `,
              showCancelButton: true,
              cancelButtonText: '在线咨询',
              confirmButtonText: '取消',
              confirmButtonClass: 'confirmButton',
              cancelButtonClass: 'cancelButton',
            }).then(action => {
              if (action === 'cancel') {
                NTKF.im_openInPageChat('bq_1000_1472795888825')
              }
            })
          } else {
            this.$messagebox({
              title:'',
              message:`
              <div style="margin-bottom:-.2rem">
                <p class='f32'>经验证，QQ客服<span class='color-m1'>${this.serviceQqFilter}</span>为真客服</p>
              </div>
              `,
              confirmButtonText: '知道了',
            })
          }
        }, err => {
          console.log(err);
        });
      }

    }
  }
}
</script>
<style scoped>
/*验证中心*/
.index-proving{ height:auto; display:block; overflow:hidden;}
.index-proving .prov-titl{height:auto; display:block; overflow:hidden;}
.index-proving .prov-titl h2{ height:0.50rem; line-height:0.50rem;}
.index-proving .prov-titl p{  line-height:0.48rem;}
.index-proving .prov-conn{height:auto; display:block; overflow:hidden;}
.index-proving .prov-conn .prov-input{ height:0.4rem; line-height:0.4rem; background:url(~images/curent.jpg) no-repeat left center; background-size:0.06rem; border:none; outline:none; padding-left:0.25rem; width:70%;margin: 0.2rem 0; position: relative;}
.index-proving .prov-conn .prov-btn{ width:1.9rem; height:0.8rem; line-height:0.8rem; border-radius:0.1rem;}
</style>
<style>
.mint-msgbox-btns button.confirmButton {
  color: #666;
  font-size: .34rem;
}
.mint-msgbox-btns button.cancelButton {
  font-size: .34rem;
}
</style>
